{% extends "layout.html" %}
{% block body %}

<script type="text/javascript">
  var experiment_name = '{{ experiment.name }}';
  var kpi = {% if experiment.kpi %}'{{ experiment.kpi }}'{% else %}false{% endif %};
</script>

<script type="text/template" id="experiment-template">
  <div class="header">
    <h3 class="name">
      <%- experiment.name %>
    </h3>
    <% if (experiment.description) { %>
      <div class="desc">
          <%= experiment.pretty_description %>
          </div>
    <% } %>
    <div class="created-at">created: <%= experiment.created_at %> | traffic fraction: <%= experiment.traffic_fraction %></div>

    <div class="controls">

      <form action="{{ url_for('toggle_experiment_pause', experiment_name=experiment.name) }}" method="post">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-small btn-inverse"><i class="icon-white icon-ok-circle"></i> <% if (experiment.is_paused) { %>Resume<% } else { %>Pause <% } %> </button>
      </form>

      <% if (!experiment.is_archived) { %>
      <form action="{{ url_for('toggle_experiment_archive', experiment_name=experiment.name) }}" method="post">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-small btn-inverse"><i class="icon-white icon-ok-circle"></i> Archive</button>
      </form>
      <% } %>

      <form>
        <button class="btn btn-small btn-inverse btn-edit-description" data-toggle="modal" data-target="#desc-modal"><i class="icon-white icon-pencil"></i> Edit Description</button>
      </form>
      <div class="collapse"></div>
      <% if (experiment.has_winner) { %>
        <form action="{{ url_for('reset_winner', experiment_name=experiment.name) }}" method="post">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
          <button class="btn btn-small btn-warning" type="submit">Reset Winner</button>
        </form>
      <% } %>

      <form>
        <button class="btn btn-small btn-warning" data-toggle="modal" data-target="#confirm-reset-modal"><i class="icon-white icon-refresh"></i> Reset</button>
      </form>

      <form>
        <button class="btn btn-small btn-danger" data-toggle="modal" data-target="#confirm-delete-modal"><i class="icon-white icon-trash"></i> Delete</button>
      </form>

      <form method="post" action="{{ url_for('export', experiment_name=experiment.name, kpi=kpi) }}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
        <button class="btn btn-small btn-info"><i class="icon-white icon-share-alt"></i> Export</button>
      </form>

      <% if (experiment.kpis.length) { %>
        <div class="choose-kpi-container">
          <select id="choose-kpi" class="btn btn-small btn-default">
          <option value="-1">Select a KPI</option>
          <option value="default">default</option>
          <% for (var i = 0; i < experiment.kpis.length; i++) { %>
            <% var ekpi = experiment.kpis[i] %>
            <option value="<%- ekpi %>"<% if (ekpi == kpi) { %> selected="selected"<% } %>><%- ekpi %></option>
          <% } %>
          </select>
          <div class="choose-kpi-arrow"></div>
        </div>
      <% } %>

    </div>
  </div>
  <div class="clearfix"></div>


  <table>
    <tbody>
      <tr>
        <th>Case</th>
        <th>Conversions</th>
        <th>Conv Rate</th>
        <th>Confidence</th>
        <th>Actions</th>
      </tr>
      <% _.each(experiment.alternatives, function (alt, index) { %>
        <tr class="<%- experiment.name.match(/\w+/g).join('-') %>-line-<%- index %>">
          <td>
            <span class="circle color-<%- (index + 1) %>">
              <% if (alt.is_winner) { %>
                <i class="icon-ok"></i>
              <% } %>
            </span>
            <div class="alt-name">
              <%- alt.name %>
              <% if (alt.is_control) { %>
                <span class="note control">control</span>
              <% } %>
            </div>
          </td>
          <td><%- alt.completed_count %> / <%- alt.participant_count %></td>
          <td>
            <%- alt.conversion_rate %>
            <span class="confidence-interval">&plusmn; <%- alt.confidence_interval %></span>

            <div class="boxplot"><div class="boxplot-inner">
              <div class="boxplot-box boxplot-losing"  style="display: <%- alt.boxplot.losing.display  %>; left: <%- alt.boxplot.losing.start  %>%; right: <%- 100 - alt.boxplot.losing.end  %>%;"></div>
              <div class="boxplot-box boxplot-neutral" style="display: <%- alt.boxplot.neutral.display %>; left: <%- alt.boxplot.neutral.start %>%; right: <%- 100 - alt.boxplot.neutral.end %>%;"></div>
              <div class="boxplot-box boxplot-winning" style="display: <%- alt.boxplot.winning.display %>; left: <%- alt.boxplot.winning.start %>%; right: <%- 100 - alt.boxplot.winning.end %>%;"></div>
            </div></div>
          </td>
          <td><span title="<%- alt.test_statistic %>"><%= alt.confidence_level %><span></td>
          <td>
            <div class="alt-controls">
              <% if (alt.is_winner) { %>
                <span class="label label-success">Winner!</span>
              <% } else { %>
                <form action="{{ url_for('set_winner', experiment_name=experiment.name) }}" method="post">
                  <input type='hidden' name="alternative_name" value="<%- alt.name %>" />
                  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-small btn-inverse">Use This</button>
                </form>
              <% } %>
              <a href="#" class="btn btn-small btn-inverse copy-querystring" data-clipboard-text="?sixpack-force-<%- experiment.name %>=<%- alt.name %>" id="copy-<%- experiment.name %>-line-<%- index %>" title="Copy forced variant querystring"><i class="icon-white icon-eye-open"></i></a>
            </div>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>

  <div class="alert copy-success">Querystring copied: <code>?=sixpack-force-button-color=orange</code>. Paste it at the end of your test page URL to see the variation.</div>

  <hr>

  <div class="chart-container">
    <div id="chart-{{experiment.name|regex_replace('[\W_]+', '-')}}" class="chart" data-experiment="{{experiment.name|regex_replace('[\W_]+', '-')}}">
      <h4>Cumulative Conversion Rate</h4>
    </div>
    <div class="clearfix"></div>
  </div>
</script>

<div id="details-page">
  <ul class="experiments"><li data-name="{{ experiment.name }}"></li></ul>
</div>

<div class="modal hide fade" id="desc-modal">
  <form action="{{ url_for('update_experiment_description', experiment_name=experiment.name, kpi=experiment.kpi) }}" method="post">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Update Description</h3>
    </div>
    <div class="modal-body">
      <textarea type="text" name="description" id="edit-description-textarea">{% if experiment.description %}{{ experiment.description }}{% endif %}</textarea>
    </div>
    <div class="modal-footer">
      <button href="#" class="btn btn-primary">Save Description</a>
    </div>
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  </form>
</div>

<div class="modal hide fade" id="confirm-reset-modal">
  <form action="{{ url_for('reset_experiment', experiment_name=experiment.name) }}" method="post">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Reset Experiment</h3>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to reset the experiment <b>{{ experiment.name }}</b>?</p>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" aria-hidden="true" class="btn btn-inverse">No</a>
      <button class="btn btn-danger">Yes</a>
    </div>
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  </form>
</div>

<div class="modal hide fade" id="confirm-delete-modal">
  <form action="{{ url_for('delete_experiment', experiment_name=experiment.name) }}" method="post">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Delete Experiment</h3>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to delete the experiment <b>{{ experiment.name }}</b>?</p>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" aria-hidden="true" class="btn btn-inverse">No</a>
      <button class="btn btn-danger">Yes</a>
    </div>
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  </form>
</div>

{% endblock %}
